<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>本文主要内容 | Gip</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/blog/favicon.ico">
    <meta name="description" content="VuePress搭建">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/blog/assets/css/0.styles.41872836.css" as="style"><link rel="preload" href="/blog/assets/js/app.ce46b86f.js" as="script"><link rel="preload" href="/blog/assets/js/2.262e1e49.js" as="script"><link rel="preload" href="/blog/assets/js/17.ceff577e.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.8f2ab6cd.js"><link rel="prefetch" href="/blog/assets/js/11.0e5fc533.js"><link rel="prefetch" href="/blog/assets/js/12.61fc7a48.js"><link rel="prefetch" href="/blog/assets/js/13.09133bea.js"><link rel="prefetch" href="/blog/assets/js/14.310e3a44.js"><link rel="prefetch" href="/blog/assets/js/15.d17fc55a.js"><link rel="prefetch" href="/blog/assets/js/16.4550e420.js"><link rel="prefetch" href="/blog/assets/js/18.b6b9ff56.js"><link rel="prefetch" href="/blog/assets/js/3.115df618.js"><link rel="prefetch" href="/blog/assets/js/4.5b96068b.js"><link rel="prefetch" href="/blog/assets/js/5.7e3d77e5.js"><link rel="prefetch" href="/blog/assets/js/6.0175cad5.js"><link rel="prefetch" href="/blog/assets/js/7.861de91f.js"><link rel="prefetch" href="/blog/assets/js/8.db580af8.js"><link rel="prefetch" href="/blog/assets/js/9.60e428ab.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.41872836.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><img src="/blog/logo.jpg" alt="Gip" class="logo"> <span class="site-name can-hide">Gip</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link">
  Home
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Contact" class="dropdown-title"><span class="title">Contact</span> <span class="arrow down"></span></button> <button type="button" aria-label="Contact" class="mobile-dropdown-title"><span class="title">Contact</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/Gip886" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link">
  Home
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Contact" class="dropdown-title"><span class="title">Contact</span> <span class="arrow down"></span></button> <button type="button" aria-label="Contact" class="mobile-dropdown-title"><span class="title">Contact</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/Gip886" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>vue教程</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Web教程</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/blog/views/web/v2.html" aria-current="page" class="active sidebar-link">本文主要内容</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#本文主要内容" class="sidebar-link">本文主要内容</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#html-的常见元素" class="sidebar-link">html 的常见元素</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#_1、head-区域的-html-元素" class="sidebar-link">1、head 区域的 html 元素</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#_2、html-元素-body-区域" class="sidebar-link">2、html 元素（body 区域）</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#html-文档的大纲" class="sidebar-link">html 文档的大纲</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#查看网页大纲的工具" class="sidebar-link">查看网页大纲的工具</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#html-元素的分类" class="sidebar-link">html 元素的分类</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#html-元素的嵌套关系" class="sidebar-link">html 元素的嵌套关系</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#html-元素的默认样式和-css-reset" class="sidebar-link">html 元素的默认样式和 CSS Reset</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#常见的-css-reset-方案" class="sidebar-link">常见的 CSS Reset 方案</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#normalize-css" class="sidebar-link">Normalize.css</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#html-常见面试题" class="sidebar-link">html 常见面试题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#doctype-的意义是什么" class="sidebar-link">doctype 的意义是什么</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#html、xhtml、html5的区别" class="sidebar-link">HTML、XHTML、HTML5的区别</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#html5-有什么新的变化" class="sidebar-link">HTML5 有什么新的变化</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#em-和-i-的区别" class="sidebar-link">em 和 i 的区别</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#语义化的意义是什么" class="sidebar-link">语义化的意义是什么</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#哪些元素可以自闭和" class="sidebar-link">哪些元素可以自闭和</a></li><li class="sidebar-sub-header"><a href="/blog/views/web/v2.html#form-表单的作用" class="sidebar-link">form 表单的作用</a></li></ul></li></ul></li><li><a href="/blog/views/web/v3.html" class="sidebar-link">Web 存储</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JSP教程</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>软件工程实践</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>算法设计</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Spring学习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="本文主要内容"><a href="#本文主要内容" class="header-anchor">#</a> 本文主要内容</h2> <ul><li><p>html 的常见元素</p></li> <li><p>html 元素的分类</p></li> <li><p>html 元素的嵌套关系</p></li> <li><p>html 元素的默认样式和 CSS Reset</p></li> <li><p>html 常见面试题</p></li></ul> <h2 id="html-的常见元素"><a href="#html-的常见元素" class="header-anchor">#</a> html 的常见元素</h2> <p>html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。</p> <h3 id="_1、head-区域的-html-元素"><a href="#_1、head-区域的-html-元素" class="header-anchor">#</a> 1、head 区域的 html 元素</h3> <blockquote><p>head 区域的 html 元素，不会在页面上留下直接的内容。</p></blockquote> <ul><li><p>meta</p></li> <li><p>title</p></li> <li><p>style</p></li> <li><p>link</p></li> <li><p>script</p></li> <li><p>base</p></li></ul> <p><strong>base元素的介绍</strong>：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>base</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。</p> <h3 id="_2、html-元素-body-区域"><a href="#_2、html-元素-body-区域" class="header-anchor">#</a> 2、html 元素（body 区域）</h3> <blockquote><p>body 区域的 html 元素，会直接出现在页面上。</p></blockquote> <ul><li><p>div、section、article、aside、header、footer</p></li> <li><p>p</p></li> <li><p>span、em、strong</p></li> <li><p>表格元素：table、thead、tbody、tr、td</p></li> <li><p>列表元素：ul、ol、dl、dt、dd</p></li> <li><p>a</p></li> <li><p>表单元素：form、input、select、textarea、button</p></li></ul> <p>div 是最常见的元素，大多数场景下，都可以用div（实在不行就多包几层div）。可见，<strong>div 是比较通用的元素，这也决定了 div 的的语义并不是很明确</strong>。</p> <p><strong>常见标签的重要属性</strong>：</p> <ul><li>a[href,target]</li> <li>img[src,alt]</li> <li>table td[colspan,rowspan]。设置当前单元格占据几行几列。在合并单元格时，会用到。</li> <li>form[target,method,enctype]</li> <li>input[type,value]</li> <li>button[type]</li> <li>selection&gt;option[value]</li> <li>label[for]</li></ul> <h3 id="html-文档的大纲"><a href="#html-文档的大纲" class="header-anchor">#</a> html 文档的大纲</h3> <p>我们平时在写论文或者其他文档的时候，一般会先列出大纲，然后再写具体的内容。</p> <p>同样，html 网页也可以看成是一种文档，也有属于它的大纲。</p> <p>一个常见的html文档，它的结构可以是：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>一级标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>二级标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>段落内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>二级标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>段落内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>aside</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>广告内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>aside</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>某某公司出品<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>footer</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="查看网页大纲的工具"><a href="#查看网页大纲的工具" class="header-anchor">#</a> 查看网页大纲的工具</h3> <p>我们可以通过 <a href="http://h5o.github.io/" target="_blank" rel="noopener noreferrer">http://h5o.github.io/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 这个工具查看一个网页的大纲。</p> <p><strong>使用方法</strong>：</p> <p>（1）将网址 <a href="http://h5o.github.io/" target="_blank" rel="noopener noreferrer">http://h5o.github.io/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 保存到书签栏</p> <p>（2）去目标网页，点击书签栏的网址，即可查看该网页的大纲。</p> <p>这个工具非常好用，既可以查看网页的大纲，也可以查看 markdown 在线文档的结构。</p> <h2 id="html-元素的分类"><a href="#html-元素的分类" class="header-anchor">#</a> html 元素的分类</h2> <p>按照样式分类：</p> <ul><li><p>块级元素</p></li> <li><p>行内元素</p></li> <li><p>inline-block：比如<code>form</code>表单元素。对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。</p></li></ul> <p>按照内容分类：</p> <p><img src="http://img.smyhvae.com/20191003_1946.png" alt=""></p> <p>图片来源：<a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content" target="_blank" rel="noopener noreferrer">https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="html-元素的嵌套关系"><a href="#html-元素的嵌套关系" class="header-anchor">#</a> html 元素的嵌套关系</h2> <ul><li><p>块级元素可以包含行内元素。</p></li> <li><p>块级元素<strong>不一定</strong>能包含块级元素。比如 div 中可以包含 div，但 p 标签中不能包含 div。</p></li> <li><p>行内元素<strong>一般</strong>不能包含块级元素。比如 span 中不能包含 div。但有个特例：在 HTML5 中， a 标签中可以包含 div。</p></li></ul> <p><strong>注意</strong>：在 HTML5 中 <code>a &gt; div</code> 是合法的， <code>div &gt; a &gt; div</code>是不合法的 ；但是在 html 4.0.1 中， <code>a &gt; div</code> 仍然是不合法的。</p> <h2 id="html-元素的默认样式和-css-reset"><a href="#html-元素的默认样式和-css-reset" class="header-anchor">#</a> html 元素的默认样式和 CSS Reset</h2> <p>比如下拉框这种比较复杂的元素，是自带默认样式的。如果没有这个默认样式，则该元素在页面上不会有任何表现，则必然增加一些工作量。</p> <p>同时，默认样式也会带来一些问题：比如，有些默认样式我们是不需要的；有些默认样式甚至无法去掉。</p> <p>如果我们不需要默认的样式，这里就需要引入一个概念：<strong>CSS Reset</strong>。</p> <h3 id="常见的-css-reset-方案"><a href="#常见的-css-reset-方案" class="header-anchor">#</a> 常见的 CSS Reset 方案</h3> <p><strong>方案一</strong>：</p> <p>CSS Tools: Reset CSS。链接：<a href="https://meyerweb.com/eric/tools/css/reset/" target="_blank" rel="noopener noreferrer">https://meyerweb.com/eric/tools/css/reset/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>方案二</strong>：</p> <p>雅虎的 CSS Reset。链接：<a href="https://yuilibrary.com/yui/docs/cssreset/" target="_blank" rel="noopener noreferrer">https://yuilibrary.com/yui/docs/cssreset/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>我们可以直接通过 CDN 的方式引入：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>方式三</strong>：（比较有争议）</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">*</span><span class="token punctuation">{</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面何种写法，比较简洁，但也有争议。有争议的地方在于，可能会导致 css 选择器的性能问题。</p> <h3 id="normalize-css"><a href="#normalize-css" class="header-anchor">#</a> Normalize.css</h3> <p>上面的几种 css reset 的解决思路是：将所有的默认样式清零。</p> <p>但是，<a href="https://necolas.github.io/normalize.css/" target="_blank" rel="noopener noreferrer">Normalize.css<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 的思路是：既然浏览器提供了这些默认样式，那它就是有意义的。<strong>既然不同浏览器的默认样式不一致，那么，<code>Normalize.css</code>就将这些默认样式设置为一致</strong>。</p> <h2 id="html-常见面试题"><a href="#html-常见面试题" class="header-anchor">#</a> html 常见面试题</h2> <h3 id="doctype-的意义是什么"><a href="#doctype-的意义是什么" class="header-anchor">#</a> doctype 的意义是什么</h3> <ul><li><p>让浏览器以标准模式渲染</p></li> <li><p>让浏览器知道元素的合法性</p></li></ul> <h3 id="html、xhtml、html5的区别"><a href="#html、xhtml、html5的区别" class="header-anchor">#</a> HTML、XHTML、HTML5的区别</h3> <ul><li><p>HTML 属于 SGML</p></li> <li><p>XHTML 属于 XML，是 HTML 进行 XML 严格化的结果</p></li> <li><p>HTML5 不属于SGML，也不属于 XML（HTML5有自己独立的一套规范），比 XHTML 宽松。</p></li></ul> <h3 id="html5-有什么新的变化"><a href="#html5-有什么新的变化" class="header-anchor">#</a> HTML5 有什么新的变化</h3> <ul><li><p>新的语义化元素</p></li> <li><p>表单增强</p></li> <li><p>新的API：离线、音视频、图形、实时通信、本地存储、设备能力等。</p></li></ul> <h3 id="em-和-i-的区别"><a href="#em-和-i-的区别" class="header-anchor">#</a> em 和 i 的区别</h3> <p>共同点：二者都是表示斜体。</p> <p>区别：</p> <ul><li><p>em 是语义化的标签，表示强调。</p></li> <li><p>i 是纯样式的标签，表示斜体。HTML5 中不推荐使用。</p></li></ul> <h3 id="语义化的意义是什么"><a href="#语义化的意义是什么" class="header-anchor">#</a> 语义化的意义是什么</h3> <ul><li><p>开发者容易理解，便于维护。</p></li> <li><p>机器（搜索引擎、读屏软件等）容易理解结构</p></li> <li><p>有助于 SEO</p></li></ul> <h3 id="哪些元素可以自闭和"><a href="#哪些元素可以自闭和" class="header-anchor">#</a> 哪些元素可以自闭和</h3> <blockquote><p>自闭和的元素中不能再嵌入别的元素。且 HTML5 中要求加斜杠。</p></blockquote> <ul><li><p>表单元素 input</p></li> <li><p>图片 img</p></li> <li><p>br、hr</p></li> <li><p>meta、link</p></li></ul> <h3 id="form-表单的作用"><a href="#form-表单的作用" class="header-anchor">#</a> form 表单的作用</h3> <ul><li><p>直接提交表单</p></li> <li><p>使用 submit / reset 按钮</p></li> <li><p>便于浏览器保存表单</p></li> <li><p>第三方库（比如 jQuery）可以整体获取值</p></li> <li><p>第三方库可以进行表单验证</p></li></ul> <p>所以，如果我们是通过 Ajax 提交表单数据，也建议加上 form。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/blog/views/vue/01.html" class="prev">
        Vue（音乐项目）实训报告
      </a></span> <span class="next"><a href="/blog/views/web/v3.html">
        Web 存储
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/blog/assets/js/app.ce46b86f.js" defer></script><script src="/blog/assets/js/2.262e1e49.js" defer></script><script src="/blog/assets/js/17.ceff577e.js" defer></script>
  </body>
</html>
